import { View, Text } from 'react-native'
import { createStyles, useStyles } from '@mf2e/react-native-theme-styles'
import Modal from 'react-native-modal'
import useAppStore from '@/store/modules/app'

const AppToast = () => {
  const styles = useStyles(themeStyles)

  const { toastConfig, hideToast } = useAppStore()

  return (
    toastConfig.toast && (
      <Modal
        style={styles.AppToast}
        isVisible={!toastConfig.closing}
        backdropOpacity={0}
        animationIn={{
          from: {
            opacity: 0,
            scale: 0.5,
          },
          to: {
            opacity: 1,
            scale: 1,
          },
        }}
        animationOut="fadeOut"
        useNativeDriver={true}
        statusBarTranslucent={true}
        onBackdropPress={hideToast}
      >
        <View style={styles.toast}>
          <Text style={styles.toastText}>{toastConfig.toast}</Text>
        </View>
      </Modal>
    )
  )
}

const themeStyles = createStyles({
  AppToast: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    margin: 0,
  },
  toast: {
    maxWidth: '60%',
    padding: 20,
    borderRadius: 6,
    backgroundColor: 'rgba(0, 0, 0, 0.8)',
  },
  toastText: {
    fontSize: 14,
    lineHeight: 20,
    color: '#fff',
  },
})

export default AppToast
